/*
  学习目标：JSX插值表达式 - 其它
  表达式: 
    变量✅
    简单类型: 
      1. string number ✅ 正常显示 
      2. boolean null undefined 💥 不会显示在界面上
    引用类型: 
      1. object ❌ 不能直接放在{}中
      2. array 💥数组内的每项元素, 会被当做dom节点, 直接渲染出来
      3. function ❌函数本身不可以放在{}中, 调用往往可以放在{}
    其它: 三元/ 逻辑且 / JSX
     

*/
import React from 'react';
import ReactDOM from 'react-dom';

function sayHello() {
  return 'hello React';
}

const isLoading = true;

const ulNode2 = (
  <div>
    {/* 💥函数本身不能直接放在插值表达式, 往往函数的调用可以放入 */}
    <h2>{sayHello()}</h2>

    <h3>{isLoading ? <button>加载中</button> : '正常显示'}</h3>
    <h3>{isLoading && '加载中...'}</h3>
    <h3>{<span>123</span>}</h3>
  </div>
);

ReactDOM.render(ulNode2, document.getElementById('root'));
